<!DOCTYPE html>
<html>
<head>
    <title>图片对比</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin: 20px;
        }
        .image-row {
            display: flex;
            gap: 20px;
            justify-content: center;
        }
        .diff-row {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 2px dashed #ccc;
        }
        canvas {
            border: 1px solid #ccc;
            max-width: 800px;
            width: 100%;
            height: auto;
        }
        .debug-info {
            margin-top: 20px;
            padding: 10px;
            background: #f0f0f0;
            width: 100%;
            max-width: 1600px;
            margin: 20px auto;
        }
        .image-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 45%;
        }
        h3 {
            margin-bottom: 10px;
            color: #333;
        }
        @media (max-width: 1200px) {
            canvas {
                max-width: 600px;
            }
            .image-container {
                width: 48%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="image-row">
            <div class="image-container">
                <h3>原始图片 1</h3>
                <input type="file" id="image1" accept="image/*">
                <canvas id="canvas1"></canvas>
            </div>
            <div class="image-container">
                <h3>原始图片 2</h3>
                <input type="file" id="image2" accept="image/*">
                <canvas id="canvas2"></canvas>
            </div>
        </div>
        <div class="diff-row">
            <h3>差异对比图</h3>
            <canvas id="diffCanvas"></canvas>
        </div>
        <div class="debug-info" id="debugInfo"></div>
    </div>

    <script>
        const canvas1 = document.getElementById('canvas1');
        const canvas2 = document.getElementById('canvas2');
        const diffCanvas = document.getElementById('diffCanvas');
        const ctx1 = canvas1.getContext('2d');
        const ctx2 = canvas2.getContext('2d');
        const diffCtx = diffCanvas.getContext('2d');
        const debugInfo = document.getElementById('debugInfo');

        function log(message) {
            console.log(message);
            debugInfo.innerHTML += message + '<br>';
        }

        let image1Loaded = false;
        let image2Loaded = false;

        function loadImage(file, canvas, ctx, isFirstImage) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = new Image();
                    img.onload = function() {
                        canvas.width = img.width;
                        canvas.height = img.height;
                        
                        ctx.imageSmoothingEnabled = true;
                        ctx.imageSmoothingQuality = 'high';
                        
                        ctx.drawImage(img, 0, 0);
                        
                        if (isFirstImage) {
                            image1Loaded = true;
                        } else {
                            image2Loaded = true;
                        }
                        resolve();
                        if (image1Loaded && image2Loaded) {
                            compareImages();
                        }
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            });
        }

        function compareImages() {
            const width = Math.min(canvas1.width, canvas2.width);
            const height = Math.min(canvas1.height, canvas2.height);

            diffCanvas.width = width;
            diffCanvas.height = height;

            diffCtx.imageSmoothingEnabled = true;
            diffCtx.imageSmoothingQuality = 'high';

            diffCtx.drawImage(canvas1, 0, 0);

            const imageData1 = ctx1.getImageData(0, 0, width, height);
            const imageData2 = ctx2.getImageData(0, 0, width, height);
            const diffImageData = diffCtx.getImageData(0, 0, width, height);

            let diffCount = 0;
            const threshold = 15;

            for (let y = 0; y < height; y++) {
                for (let x = 0; x < width; x++) {
                    const i = (y * width + x) * 4;
                    
                    const r1 = imageData1.data[i];
                    const g1 = imageData1.data[i + 1];
                    const b1 = imageData1.data[i + 2];
                    
                    const r2 = imageData2.data[i];
                    const g2 = imageData2.data[i + 1];
                    const b2 = imageData2.data[i + 2];

                    const diffR = Math.abs(r1 - r2);
                    const diffG = Math.abs(g1 - g2);
                    const diffB = Math.abs(b1 - b2);

                    if (diffR > threshold || diffG > threshold || diffB > threshold) {
                        diffCount++;
                        diffImageData.data[i] = 255;
                        diffImageData.data[i + 1] = 0;
                        diffImageData.data[i + 2] = 0;
                        diffImageData.data[i + 3] = 255;

                        if (x > 0 && x < width - 1 && y > 0 && y < height - 1) {
                            const top = ((y - 1) * width + x) * 4;
                            const bottom = ((y + 1) * width + x) * 4;
                            const left = (y * width + (x - 1)) * 4;
                            const right = (y * width + (x + 1)) * 4;

                            [top, bottom, left, right].forEach(pos => {
                                if (!isDifferent(pos)) {
                                    diffImageData.data[pos] = 255;
                                    diffImageData.data[pos + 1] = 255;
                                    diffImageData.data[pos + 2] = 0;
                                    diffImageData.data[pos + 3] = 255;
                                }
                            });
                        }
                    }
                }
            }

            function isDifferent(pos) {
                return diffImageData.data[pos] === 255 && 
                       diffImageData.data[pos + 1] === 0 && 
                       diffImageData.data[pos + 2] === 0;
            }

            diffCtx.putImageData(diffImageData, 0, 0);

            diffCtx.globalCompositeOperation = 'source-over';
            diffCtx.fillStyle = 'rgba(255, 255, 0, 0.15)';
            diffCtx.fillRect(0, 0, width, height);

            const totalPixels = width * height;
            const diffPercentage = (diffCount / totalPixels) * 100;
            
            debugInfo.innerHTML = '';
            log(`原始图片尺寸: ${width} x ${height} 像素`);
            log(`图片分辨率: ${(width * height / 1000000).toFixed(2)} 百万像素`);
            log(`发现差异: ${diffCount} 个像素`);
            log(`差异比例: ${diffPercentage.toFixed(2)}%`);
            if (diffCount > 0) {
                log('红色区域表示差异部分，黄色边框标注差异边界');
                log(`差异区域平均大小: ${(diffCount / (width * height) * 10000).toFixed(2)} 像素/万分比`);
            }
        }

        document.getElementById('image1').addEventListener('change', function(e) {
            if (e.target.files[0]) {
                debugInfo.innerHTML = '';
                image1Loaded = false;
                image2Loaded = false;
                loadImage(e.target.files[0], canvas1, ctx1, true)
                    .then(() => log('图片1加载成功'))
                    .catch(err => log('图片1加载失败: ' + err));
            }
        });

        document.getElementById('image2').addEventListener('change', function(e) {
            if (e.target.files[0]) {
                debugInfo.innerHTML = '';
                image2Loaded = false;
                loadImage(e.target.files[0], canvas2, ctx2, false)
                    .then(() => log('图片2加载成功'))
                    .catch(err => log('图片2加载失败: ' + err));
            }
        });
    </script>
</body>
</html> 